<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2 {
            text-align: center;
        }
        
        .big_box {
            width: 500px;
            height: 960px;
            border: 2px solid red;
            margin: auto;
            background-color: white;
            background-color: #cccc;
        }
        
        .small_box {
            border: 1px solid blue;
            border-radius: 10px;
            width: 230px;
            height: 300px;
            margin: 9px;
            background-color: white;
        }
        
        .small_box:nth-child(odd) {
            float: left;
        }
        
        .small_box img {
            display: block;
            margin: 20px auto;
        }
        
        .small_box p {
            text-align: center;
        }
        
        .small_box p:nth-child(3) span:nth-child(1) {
            color: red;
            font-size: 20px;
        }
        
        .small_box p:nth-child(3) span:nth-child(2) {
            color: red;
        }
        
        .small_box p span:nth-child(3) {
            border: 1px solid gray;
            border-radius: 5px;
            color: gray;
            margin-left: 20%;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>您点击的手机是{{title}}</h2>
        <div class="big_box">
            <small_box @cli="clicks"></small_box>
        </div>
    </div>
    <template id="small_box">
        <div>
            <div v-for="(item,index) in phone">
                <div class="small_box" @click="cli(index)">
                    <img src="./image/redmi 10a.jpg" width="150px" height="150px">
                    <p>{{item.name}}</p>
                    <p><span>¥{{item.price}}</span><span>起</span><span>看相似</span></p>
                </div>
            </div>
        </div>
    </template>
    <script src="./vue.js"></script>
    <script>
        const counterApp = new Vue({
            el: '#app',
            data() {
                return {
                    title: ''
                }
            },
            components: {
                'small_box': {
                    data() {
                        return {
                            phone: [{
                                name: '红米10A',
                                price: 6000
                            }, {
                                name: 'OPPO A9',
                                price: 6100
                            }, {
                                name: 'HUAWEI 20',
                                price: 6200
                            }, {
                                name: 'VIVO X20',
                                price: 6300
                            }, {
                                name: '红米14A',
                                price: 6400
                            }, {
                                name: '红米15A',
                                price: 6500
                            }]
                        }
                    },
                    props: ['title'],
                    template: '#small_box',
                    methods: {
                        cli(index) {
                            let title = this.phone[index].name;
                            this.$emit('cli', title);
                        }
                    }
                },
            },
            methods: {
                clicks(val) {
                    this.title = val;
                }
            }
        })
    </script>
</body>

</html>